<template>
  <div class="body-box" v-loading="load">
    <!-- 提交需求 -->
    <div class="need-body" v-if="show_type == 2">
      <div class="needs-title">需要一块跑帮您什么？</div>
      <el-divider>
        <span class="divider-txt">
          需求类型
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
        <div
          :class="item.select ? 'needs-select-option active' : 'needs-select-option'"
          v-for="(item,key) in needs"
          :key="key"
          @click="changeOption(key)"
        >
          {{item.name}}
          <img
            src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/20191101144209.png"
            v-if="item.select"
            class="option-select-icon"
          />
        </div>
      </div>
      <el-divider>
        <span class="divider-txt">
          需求概述
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
        <el-input
          class="need-txtarea"
          type="textarea"
          v-model="needs_txt"
          placeholder="例如：我们公司下个月18日在北京朝阳区计划举办一个千人行业大会，对于活动场地、舞台灯光、宣传推广等等都有需求，预算有限希望能有整合套餐服务！"
          maxlength="255"
          show-word-limit
        ></el-input>
      </div>
      <el-divider>
        <span class="divider-txt">
          留下联系方式我们将有专人与您联系
          <span class="divider-txt-notnull">*</span>
        </span>
      </el-divider>
      <div class="needs-select-box">
        <el-input v-model="mobile" placeholder="请输入手机号" type="number" maxlength="11" show-word-limit></el-input>
      </div>
      <div class="com-btn needs-btn" @click="submit()">立即提交</div>
    </div>
    <!-- 需求列表 -->
    <div v-if="show_type == 1">
      <div class="add-btn-box">
        <el-button class="com-btn" size="mini" icon="el-icon-plus" @click="addNeedsBnt()">提交需求</el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item,key) in list" :key="key">
          <el-card>
            <!-- 需求类型 -->
            <div class="needs-type-list">
              <div class="needs-type-name">
                <span>需求类型</span>
                <span class="needs-state-tag">
                  <el-tag size="mini" v-if="item.state == 0">处理中</el-tag>
                  <el-tag size="mini" v-if="item.state == 1" type="warning">已受理</el-tag>
                  <el-tag size="mini" v-if="item.state == 2" type="danger">已拒绝</el-tag>
                  <el-tag size="mini" v-if="item.state == 3" type="success">已完成</el-tag>
                </span>
              </div>
              <span v-for="(items,keys) in item.type_id" :key="keys">{{items.name}}</span>
            </div>
            <!-- 需求描述 -->
            <div class="needs-memos">{{item.memo}}</div>
            <!-- 需求电话 -->
            <div class="nedds-mobiles">联系电话：{{item.mobile}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: { active_id: {} },
  data() {
    return {
      needs: [],
      needs_select: [],
      needs_txt: "",
      mobile: "",
      load: true,
      show_type: 0,
      list: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //提交需求
    addNeedsBnt() {
      this.show_type = 2;
      this.getNeedsType();
    },
    //获取本活动提交的需求列表
    getData() {
      this.ajaxs("active/getNeedsList", {
        data: { active_id: this.active_id },
        success: res => {
          this.list = res.msg;
          this.show_type = res.msg.length > 0 ? 1 : 2;
          this.load = false;
          if (this.show_type == 2) this.getNeedsType();
        }
      });
    },
    //提交需求
    submit() {
      if (!this.needs_select.length) return this.toast(0, "请选择服务需求");
      if (!this.needs_txt) return this.toast(0, "请输入需求概述");
      if (!this.mobile) return this.toast(0, "请输入手机号");
      var needs_arr = [];
      for (var i in this.needs_select) {
        needs_arr.push(this.needs_select[i].id);
      }
      this.ajaxs("active/addNeeds", {
        data: {
          type_id: needs_arr,
          memo: this.needs_txt,
          mobile: this.mobile,
          active_id: this.active_id
        },
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) this.getData();
        }
      });
    },
    //获取活动需求类型
    getNeedsType() {
      this.load = true;
      this.ajaxs("active/getNeedsType", {
        success: res => {
          var data = res.msg;
          for (var i in data) {
            data[i].select = false;
          }
          this.needs = data;
          this.load = false;
        }
      });
    },
    //选择取消选择需求
    changeOption(key) {
      this.needs[key].select = !this.needs[key].select;
      this.needs_select = [];
      for (var i in this.needs) {
        if (this.needs[i].select) {
          this.needs_select.push(this.needs[i]);
        }
      }
    },
    changeNeeds(key) {
      this.needs_index = key;
    }
  }
};
</script>

<style>
.add-btn-box {
  margin-bottom: 20px;
}
.needs-state-tag {
  float: right;
}
.nedds-mobiles {
  margin-top: 20px;
}
.needs-memos {
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
  color: #666;
}
.needs-type-name {
  font-weight: bold;
  font-size: 16px;
  overflow: hidden;
}
.needs-type-list > span {
  padding-right: 20px;
  padding-top: 10px;
  display: inline-block;
}
.needs-btn {
  width: 420px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}
.need-txtarea textarea {
  height: 150px;
}
.nees-info-item {
  float: left;
  width: calc(33.3% - 30px);
  height: 40px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.nees-info-item:nth-child(2) {
  width: calc(33.3% + 20px);
}
.nees-info-item:last-child {
  margin-right: 0;
}
.needs-select-box {
  overflow: hidden;
  margin-top: 40px;
}
.needs-select-option,
.needs-needs-item {
  position: relative;
  float: left;
  width: calc(20% - 16px);
  margin-right: 20px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background: #f1f1f1;
  margin-bottom: 20px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid #f1f1f1;
  overflow: hidden;
}
.needs-select-option:hover,
.needs-select-box .active,
.needs-needs-item:hover {
  border-color: #8a70c6;
  background: #fff;
}
.needs-needs-item {
  margin-right: 0;
  float: left;
  width: calc(50% - 20px);
  height: 50px;
  line-height: 50px;
}
.needs-needs-item:last-child {
  float: right;
}
.needs-select-option:nth-child(5),
.needs-select-option:last-child {
  margin-right: 0;
}
.option-select-icon {
  position: absolute;
  top: 0;
  right: 0;
}
.needs-title {
  font-size: 20px;
  margin: 30px 0;
}
.divider-txt {
  color: #999;
}
.divider-txt-notnull {
  color: #f56c6c;
}
</style>